<template>
  <el-drawer v-model="drawer" direction="rtl">
    <template #header>
      <h4>请假申请</h4>
    </template>
    <template #default>
      <el-form ref="ruleFormRef" style="max-width: 600px" :model="form" :rules="rules" label-width="150px"
        class="demo-ruleForm" status-icon>
        <el-form-item label="请假类型" prop="leaveType">
          <el-select v-model="form.leaveType" placeholder="请选择请假类型" style="width: 100%">
            <el-option v-for="item in leaveTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
          </el-select>
        </el-form-item>
        <el-form-item label="请假原因" prop="reason">
          <el-input v-model="form.reason" min="5" max="200" placeholder="请输入请假原因" />
        </el-form-item>
        <el-form-item label="审批人" prop="staffId">
          <el-input v-model="form.staffName" style="width: 240px" disabled placeholder="请输入审批人" />
        </el-form-item>
        <el-form-item label="抄送人" prop="staffId">
          <el-input v-model="form.teacherName" style="width: 240px" disabled placeholder="请输入抄送人" />
        </el-form-item>
        <el-form-item label="请假开始时间" prop="startTime">
          <el-date-picker v-model="form.startTime" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" :editable="false"
            placeholder="请选择请假开始时间" />
        </el-form-item>
        <el-form-item label="请假结束时间" prop="endTime">
          <el-date-picker v-model="form.endTime" value-format="YYYY-MM-DD HH:mm:ss" type="datetime" :editable="false"
            placeholder="请选择请假结束时间" />
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="">重置</el-button>
        <el-button type="primary" @click="submitForm(ruleFormRef)">确认</el-button>
      </div>
    </template>
  </el-drawer>
</template>

<script setup>
import { useStudentStore } from '@/stores/student'
import { format } from 'date-fns'
import { ref, computed, onMounted } from 'vue'
import axios from '@/axios/index'

let drawer = defineModel('drawer')
let emit = defineEmits('updateData')
const student = useStudentStore()
const ruleFormRef = ref()
const form = ref({
  studentId: student.studentInfo.id,
  leaveType: '',
  reason: '',
  staffId: '',
  staffName: '',
  teacherId: '',
  teacherName: '',
  startTime: '',
  endTime: '',
  status: 0
})
const leaveTypeOptions = [
  {
    label: '病假',
    value: 1
  },
  {
    label: '事假',
    value: 2
  },
  {
    label: '婚假',
    value: 3
  },
  {
    label: '其他',
    value: 4
  },
]

const rules = ref({
  leaveType: [{ required: true, message: '请选择请假类型', trigger: 'blur' }],
  reason: [
    { required: true, message: '请填写请假原因', trigger: 'blur' },
    { min: 5, max: 200, message: '请假原因长度必须在5-200字以内', trigger: 'blur' },
  ],
  staffId: [{ required: true, message: '请选择审批人', trigger: 'blur' }],
  startTime: [
    { required: true, message: '请选择请假开始时间', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (new Date(currentDate.value) > new Date(value) && new Date(value)) {
          callback(new Error('所选时间必须在当前时间之后'))
        } else {
          callback()
        }
      },
      trigger: 'change',
    }
  ],
  endTime: [
    { required: true, message: '请选择请假结束时间', trigger: 'blur' },
    {
      validator: (rule, value, callback) => {
        if (new Date(value) <= new Date(form.value.startTime) && new Date(value)) {
          callback(new Error('所选时间必须在请假开始时间之后'))
        } else {
          callback()
        }
      },
      trigger: 'change',
    }
  ],
})

let save = function () {
  axios.post(`api/v1/front/leave`, form.value, {
    headers: {
      "content-type": 'application/json'
    }
  }).then(response => {
    if(response.data.code == 200){
      emit('updateData',1,5,null)
      drawer.value = false
    }
  })
}

const submitForm = async (formEl) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      save()
    }
  })
}

//获取审批人列表
let getapprover = function () {
  axios.get(`api/v1/front/leave/getApproves`, {
    params: {
      studentId: student.studentInfo.id
    }
  }).then(response => {
    form.value.teacherId = response.data.data.teacherId
    form.value.teacherName = response.data.data.teacherName
    form.value.staffId = response.data.data.staffId
    form.value.staffName = response.data.data.staffName
  })
}

onMounted(() => {
  getapprover()
})

// 获取当前时间
const currentDate = computed(() => {
  return format(new Date(), 'yyyy-MM-dd HH:mm:ss') // ISO格式的日期字符串，不包含时间  
})
</script>

<style scoped></style>